<template>
  <view class="mask" v-if="visible" >
    <view class="container">
      <view class="top">
        <view :style="{marginTop:'11rpx',display:'inline-block'}">反馈与评价</view>
        
        <view class="closeBtn" @click="close"><image src="../../static/评价退出.png" ></image></view>
      </view>
      <view class="boundary"></view>
      <view class="content">
        <view class="evaluate">
          评价
          <view
            class="start"
            ref="starWrap"
            @touchstart="handleTouchStart"
            @touchmove="handleTouchMove"
            @touchend="handleTouchEnd"
          >
            <view class="startIcon" v-for="i in 5" :key="i" @click="setRating(i)">
              <image :src="getStarImage(i)"></image>
              <view class="starText">{{['一星','二星','三星','四星','五星'][i-1]}}</view>
            </view>
          </view>
          
            
          </view>  
          <view class="repaly">
            反馈
            <view class="reButtom">
              <view v-for="(item ,index) in repaly" :key="index" class="reProblem" :class="{selected: selectedItems.includes((index + 1).toString())}" @click="toggleSelect(index)">
                {{item}}
              </view>
            </view>
            <view class="word">
              <textarea 
                  class="write" 
                  placeholder="请输入您的评价"
                  v-model="feedbackText"
                  style="height:270rpx"
                  auto-height
                />
            </view>
            <button :style="{backgroundColor:'#e1383c',color:'white',width:'690rpx',borderRadius:'16rpx',height:'80rpx',marginTop:'38rpx'}" @click="submitFeedback">提交</button>
        </view>
        
      </view>
    </view>
  </view>
</template>

<script setup>
import { string } from 'uview-plus/libs/function/test'
import { ref, nextTick } from 'vue'
const emit = defineEmits(['submit','update:visible'])
const selectedItems = ref('')
const starWrap = ref(null) 
const isTouching = ref(false)
const hoverRating = ref(0)
const currentRating = ref(0)
const props = defineProps({
  visible:{
    type:Boolean,
    default:false
  },
  chatId:{
    type:string,
    default:""
  }
})
const feedbackText = ref('')
const repaly = ref([
  "答案准确",
  "内容完善",
  "易于理解",
  "答案不准确",
  "流程复杂",
  "信息虚假"
])
const close = ()=>{
  emit('update:visible', false);
}
const submitFeedback = () =>{
  const feedData = {
    conversationId:props.chatId,
    starRating:currentRating.value,
    feedbackTags:selectedItems.value,
    userComment:feedbackText.value
  };
  emit('submit',feedData);
  emit('update:visible',false);
}
// 获取星星图片
const getStarImage = (index) => {
  const rating = isTouching.value ? hoverRating.value : currentRating.value
  if (index <= rating) {
    return '/static/fullstartico.png'
  } else if (index - 0.5 <= rating) {
    return '/static/halfstartico.png'
  } else {
    return '/static/emptystartico.png'
  }
}

// 点击评分
const setRating = (rating) => {
  currentRating.value = Math.round(rating)
}

// 触摸开始
const handleTouchStart = (e) => {
  isTouching.value = true
  handleTouchMove(e)
}

// 触摸滑动
const handleTouchMove = (e) => {
  if (!isTouching.value) return
  // 关键：用ref，不用getCurrentInstance
  nextTick(() => {
    const query = uni.createSelectorQuery();
    query.selectAll('.starIcon').boundingClientRect(rects => {
      const touchX = e.touches[0].clientX
      let rating = 0
      rects.forEach((rect, index) => {
        const starWidth = rect.width
        const starCenter = rect.left + starWidth / 2
        if (touchX >= rect.left) {
          rating = touchX < starCenter ? index + 0.5 : index + 1
        }
      })
      hoverRating.value = Math.min(5, Math.max(0.5, rating))
    }).exec()
  })
}

// 触摸结束
const handleTouchEnd = () => {
  isTouching.value = false
  currentRating.value = hoverRating.value
}
const toggleSelect = (index) => {
  const current = selectedItems.value;
  const indexStr = (index + 1).toString();
  if(current.includes(indexStr)){
    const parts = current.split(',').filter(item => item !== indexStr);
    selectedItems.value = parts.join(',');
  }else{
    selectedItems.value = current ? `${current},${indexStr}` : indexStr;
  }
}
</script>

<style scoped>
  .mask{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background-color:rgba(140, 140, 138, 0.5);
    z-index: 999;
    }
  .container{
    width: 100%;
    margin-top: 217rpx;
    background-color: #ffffff;
    border-radius: 24rpx 24rpx 0 0;
    box-sizing: border-box;
    padding: 30rpx;
    overflow-y: auto;
    resize: none;
  }
  .top{
    font-size: 40rpx;
    font-family: 'Source Han Sans CN';
    align-items: center;
    color: #1a1a19;
    text-align: center;
    position: relative;
    height: 80rpx;
  }
  .closeBtn{
    position: absolute;
    top: 0;
    right: 30rpx;
    z-index: 1;
  }
  .top image{
    height: 36rpx;
    width : 36rpx;
  }
  .boundary{
    height: 2rpx;
    border-bottom: 2rpx solid #999999; /* 2rpx描边 */
    margin:30rpx 0; /* 上下边距 */ ;
  }
  .evaluate{
    margin: 36rpx 0;
  }
  .start {
    display: flex;
    justify-content: center;
  }
  .startIcon{
    margin-right: 48rpx;
    margin-top: 44rpx;
  }
  .startIcon image{
    margin-bottom: 16rpx;
    height: 72rpx;
    width: 75rpx;
  }
  .reButtom{
    display: grid;
    grid-template-columns: repeat(3,220rpx);
    justify-content: center;
    gap: 20rpx;
    padding: 20rpx 0;
  }
  .reProblem{
    height: 90rpx;
    display: flex;
    color: #9ca3af;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    text-align: center;
    background-color: #f7f7f7;
    border-radius: 16rpx;
  }
  .reProblem.selected{
    color: #e1383c;
    border: 1px solid #e1383c;
    background-color: #fef3f3;
  }
  .word{
    padding: 20rpx;
  }
  .write{
    background-color: #f7f7f7;
    width:690rpx;
    border-radius: 16rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    padding-bottom: 36rpx;
    min-height: 270rpx;
  }
</style>